/* sidebar */

#admin-sidebar {
  display: block;
  float: left;
  width: 220px;
  background: #2e363f !important;
  line-height: 20px;
}

/* mobile phone */

#admin-sidebar .mobile-phone {
  width: 100%;
  padding: 0.5rem 0.5rem;
  border-top: 1px solid #37414b;
  border-bottom: 1px solid #1f262d;
  background: #2e363f !important;
  overflow: hidden !important;
  display: none;
}

#admin-sidebar .mobile-phone > a {
  padding: 0;
  color: #939da8;
  font-weight: bold;
  text-decoration: none;
}

#admin-sidebar .mobile-message {
  float: right;
}

#admin-sidebar.open > ul {
  display: block;
}

#admin-sidebar .mini-menu {
  width: 100%;
  display: none;
  padding: 0.5rem 0;
  border-top: 1px solid #37414b;
  border-bottom: 1px solid #1f262d;
  background-color: #2e363f !important;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#admin-sidebar .mini-menu a {
  padding: 0;
  text-decoration: none;
  display: block;
}

/* menu */

#admin-sidebar ul {
  padding: 0;
}

#admin-sidebar .submenu > ul {
  display: none;
}

#admin-sidebar .submenu.open > ul {
  display: block;
}

#admin-sidebar ul li {
  display: block;
  padding: 0;
}

#admin-sidebar ul li a {
  display: block;
  padding: 0.5rem 1rem;
}

#admin-sidebar ul li a span {
  margin-left: 0.2rem;
}

#admin-sidebar > ul {
  border-bottom: 1px solid #37414b;
}

#admin-sidebar > ul > li {
  border-top: 1px solid #37414b;
  border-bottom: 1px solid #1f262d;
}

#admin-sidebar > ul > li > a {
  display: block;
  color: #939da8;
}

#admin-sidebar .submenu ul {
  background-color: #1e242b;
}

#admin-sidebar .submenu ul li {
  border-top: 1px solid #37414b;
}

#admin-sidebar .submenu ul li > a {
  color: #939da8;
  display: block;
}

#admin-sidebar .submenu .submenu {
  background-color: #3f4954;
  /*background-color: #35495E;*/
}

#admin-sidebar .submenu .submenu ul li {
  border-bottom: 1px solid #352f33;
  background-color: #37414b;
}

#admin-sidebar .submenu .submenu ul li > a {
  display: block;
  color: #fcfcfc;
}

/* menu active */

#admin-sidebar > ul > li.active {
  border-top: 1px solid #27a9e3;
  background-color: #27a9e3;
}

#admin-sidebar > ul > li.active > a {
  background: url("../img/menu-active.png") no-repeat scroll right center
    transparent !important;
  text-decoration: none;
  color: #fff;
}

#admin-sidebar > ul > li > a:hover {
  background-color: #27a9e3;
  color: #fff;
}

#admin-sidebar .submenu ul li.active > a {
  color: #fff;
  background: #28b779;
}

#admin-sidebar .submenu ul li > a:hover {
  color: #fff;
  background-color: #28b779;
}

#admin-sidebar .submenu .submenu ul li.active > a {
  color: #fff;
  background: #2255a4;
}

#admin-sidebar .submenu .submenu ul li > a:hover {
  color: #fff;
  background-color: #2255a4;
}

@media (min-width: 481px) and (max-width: 970px) {
  #admin-sidebar {
    width: 45px;
  }

  #admin-sidebar .mini-menu {
    display: block;
  }

  #admin-sidebar.normal-menu {
    width: 220px;
  }

  #admin-sidebar ul li a span {
    display: none;
  }

  #admin-sidebar.normal-menu ul li a span {
    display: inline-block;
  }
}

@media (max-width: 480px) {
  #admin-sidebar {
    width: 100%;
    float: none;
  }

  #admin-sidebar.normal-menu {
    width: 100%;
  }

  #admin-sidebar > ul {
    display: none;
  }

  #admin-sidebar .mini-menu {
    display: none;
  }

  #admin-sidebar ul li a span {
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
  }

  #admin-sidebar .mobile-phone {
    display: block !important;
    overflow: hidden !important;
  }
}

/* transitions */

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
